<template>
	<view class="page page-fill">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">个人资料</block>
		</cu-custom>
		
		<view class="cu-list menu">
			<view class="cu-item arrow">
				<view class="content">
					<text class="cuIcon-cuIcon text-grey"></text>
					<text class="text-grey">头像</text>
				</view>
				<view class="action">
					<image src="/static/icos/default-face.png" class="png cu-avatar round sm" mode="aspectFit"></image>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-people text-grey"></text>
					<text class="text-grey">昵称</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">dandan</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-time text-grey"></text>
					<text class="text-grey">生日</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">2021-05-20</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
					<text class="text-grey">性别</text>
				</view>
				<view class="action">
					<view class="cu-tag round bg-blue light">男</view>
					<!-- <view class="cu-tag round bg-orange light">女</view> -->
				</view>
			</view>
		</view>

		<view class="footer-wrapper">
			<view class="footer-text" @click="cleanStorage">清理缓存</view>
			<view class="footer-text m-t-10" @click="logout">退出登录</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginUser: {}
			}
		},
		onShow() {
			var me = this;
			var user = me.getLoginUser();
			if (user != null) {
				me.loginUser = user;
			}
		},
		methods: {
			cleanStorage() {
				uni.clearStorageSync();
				uni.showToast({
					title: '清理缓存成功',
					mask: false,
					duration: 1500
				})
			},
			logout() {
				var loginUser = this.getLoginUser();
				if (loginUser == null) {
					return;
				}
				var serverUrl = this.serverUrl;
				// 提交表单数据
				// uni.request({
				// 	url: serverUrl + '/user/logout?userId=' + loginUser.id,
				// 	method: 'GET',
				// 	success: (res) => {
				// 		if (res.data.status == 200) {
				// 			uni.removeStorageSync('loginUser');
				// 			uni.switchTab({url: '../me/me'});
				// 		}
				// 	}
				// });
				uni.switchTab({url: '../me/me'});
			}
		}
	}
</script>

<style>
	.page-fill {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.profile-list {
		padding: 0 30upx;
	}

	.item-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.face-line-upbottom {
		padding-top: 20upx;
		padding-bottom: 20upx;
	}

	.profile-text {
		width: 25%;
		line-height: 80upx;
		font-size: 16px;
		color: #333;
	}

	.right-wrapper {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.face {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}

	.arrow-block {
		margin-left: 10upx;
		line-height: 80upx;
	}

	.arrow-icon {
		width: 30upx;
		height: 30upx;
	}

	.gray-text {
		font-size: 14px;
		color: darkgray;
		line-height: 80upx;
	}

	.footer-wrapper {
		display: flex;
		flex-direction: column;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.footer-text {
		padding: 20upx;
		text-align: center;
		font-size: 16px;
		color: #333;
		background-color: #fff;
	}

	.m-t-10 {
		margin-top: 10upx;
	}
</style>
